<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
            浮动元素会对父元素造成影响：
                如果父元素没有高度，它的所有的子元素都浮动了，父元素的高度就变成0，塌陷了。

                清除影响：
                    清除影响，也叫清除浮动。

            清除浮动（清除对父元素造成的影响）：
                1）加高法   用的不多，因为一个盒子的高度通常是靠内容撑起来的
                2）overflow:hidden;  手动触发BFC
                3）内墙法   在父元素内部的最后面，手动添加一个div   了解
                4）伪元素   说白了就内墙法的改造版
                5）封装一个清除浮动的类  哪个父元素受影响了，只需要在父元素身上添加这个类就OK了

            清除浮动（清除对兄弟元素造成的影响）：
                1）clear:both;      left: 清除左浮动造成的影响   right：清除右浮动造成的影响  
                                    both: 清除左右浮动造成的影响

                这一行代码写在什么地方？
                答：哪个兄弟元素受影响了，就写在哪个兄弟元素上。
        */

        /* ------------------------ */

        .father{
            width: 400px;
            background-color: gold;
            border: 1px solid red;
        }
        .son{
            width: 100px;
            height: 100px;
            border: 1px solid green;
        }
        .son1{ background-color: lightgreen; float: left;}
        .son2{ background-color: aqua; float: left;}
        .son3{ background-color: lightcoral; clear:both; }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son son1">son1</div>
        <div class="son son2">son2</div>
        <div class="son son3">son3</div>
    </div>
</body>
</html>